<template>
  <div :class="{'radio-mobile-box': showMobilePage}" class="radio-edit-box">
    <div v-if="!canEdit" class="radio-text">{{ text }}</div>
    <div v-else class="radio-edit">
      <div class="radio-text">
        <el-radio-group v-model="data" @change="changeValue">
          <el-radio v-for="item in options" :key="item.value" :label="item.value">
            <span style="font-size:13px;">{{ item.label }}</span>
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="isInStampEvent" class="stamp-tip">
        <i class="el-icon-warning" />
        <span><span v-if="!showMobilePage">注意：</span>当前节点需要选择盖章类型</span>
      </div>
      <div v-if="stampRequired" class="required-tip">请选择盖章类型</div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { showModal } from '@/utils/message';
import { mapState } from 'vuex';
export default {
  components: { Title },
  props: {
    text: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    canEdit: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    },
    params: {
      type: Number,
      default: null
    },
    stampRequired: {
      type: Boolean,
      default: false
    },
    isInStampEvent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: JSON.parse(JSON.stringify(this.params))
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    params: {
      handler(val) {
        this.data = val;
      },
      immediate: true
    }
  },
  methods: {
    changeValue(e) {
      showModal('是否确定修改盖章类型', '', {
        center: true,
        showClose: true
      }, true).then(() => {
        this.$emit('changeRadioValue', e);
      }).catch(_ => {
        this.data = JSON.parse(JSON.stringify(this.params));
        return false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.radio-edit-box {
  position: relative;
  .radio-text {
    position: relative;
    z-index: 2;
  }
  .required-tip {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 3;
  }
  .radio-edit {
    display: flex;
    align-items: center;
    .stamp-tip {
      z-index: 2000;
      background-color: #FFF8EA;
      border-radius: 4px;
      font-size: 12px;
      padding: 3px 8px;
      margin-left: 40px;
      line-height: 24px;
      span {
        color: #333;
      }
      .icon {
        cursor: pointer;
        margin-left: 8px;
        color: #C0C4CC;
        &:hover {
          color: #909399;
        }
      }
      ::v-deep{
        .el-icon-warning {
          color: #E6A23C;
        }
      }
    }
  }
  .center{
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  &.radio-mobile-box {
    .stamp-tip {
      position: absolute;
      top: 27px;
      left: 0;
      margin-left: 0;
    }
    .required-tip {
      top: 56px;
    }
  }
}
</style>
